﻿
<title>
    <fap-multilang lang-key="page_modifypassword_title" default-content="修改密码"></fap-multilang>
    </title>
<link href="~/Content/entropizer/css/jquery-entropizer.min.css" rel="stylesheet" />
@if (ViewBag.IsOri == 1)
{
    <div class="row">
        <div class="col-xs-12">
            <div class="alert alert-warning">
                <button type="button" class="close" data-dismiss="alert">
                    <i class="ace-icon fa fa-times"></i>
                </button>
                <strong><fap-multilang lang-key="page_modifypassword_warning" default-content="警告"></fap-multilang>!</strong>
                <fap-multilang lang-key="page_modifypassword_warning_desc" default-content="您的密码目前使用的是系统默认密码，为了您的信息安全，请及时修改密码。"></fap-multilang> 
                <br />
            </div>
        </div>
    </div>
}
<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <form class="form-horizontal" id="frmResetPwd" role="form">

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="oripassword"><fap-multilang lang-key="page_modifypassword_originpassword" default-content="原始密码"></fap-multilang> </label>

                <div class="col-sm-9">
                    <input type="password" id="oripassword" name="oripassword" multi-placeholder="原始密码" class="col-xs-10 col-sm-5 " />

                </div>
            </div>

            <div class="space-4"></div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="newpassword"><fap-multilang lang-key="page_modifypassword_newpassword" default-content="新密码"></fap-multilang>  </label>

                <div class="col-sm-9">
                    <input type="password" id="newpassword" name="newpassword" multi-placeholder="新密码" class="col-xs-10 col-sm-5" />

                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="meter1"><fap-multilang lang-key="page_modifypassword_passwordstrength" default-content="密码强度"></fap-multilang> </label>

                <div class="col-sm-9">
                    <div class="col-md-5" id="meter1"></div>
                </div>
            </div>

            <div class="space-4"></div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="confirmpassword"><fap-multilang lang-key="page_modifypassword_confirmpassword" default-content="确认新密码"></fap-multilang></label>

                <div class="col-sm-9">
                    <input type="password" id="confirmpassword" name="confirmpassword" multi-placeholder="确认新密码" class="col-xs-10 col-sm-5" />
                </div>
            </div>

            <div class="space-4"></div>
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-2"></label>
                <div class="col-sm-9">
                    <button class=" btn btn-info" type="button" id="btnResetPassword">
                        <i class="ace-icon fa fa-check align-top bigger-125"></i>
                        <fap-multilang lang-key="ok" default-content="确定"></fap-multilang>
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var scripts = [null, "/Content/entropizer/js/entropizer.js", "/Content/entropizer/js/jquery-entropizer.js", null]
    $('.page-content-area').ace_ajax('loadScripts', scripts, function () {
        jQuery(function ($) {
            $('#meter1').entropizer({
                target: '#newpassword', buckets: [
                    { max: 30, strength: '差', color: '#e13' },
                    { min: 30, max: 50, strength: '好', color: '#f80' },
                    { min: 50, max: 70, strength: '很好', color: '#8c0' },
                    { min: 70, strength: '优秀', color: '#0c8' }
                ], update: function (data, ui) {
                    ui.bar.css({
                        'background-color': data.color,
                        'width': data.percent + '%'
                    });
                    ui.text.html(data.strength + ' (' + data.entropy.toFixed(0) + ' 位)');
                }, engine: {
                    classes: ['lowercase', 'uppercase', 'numeric']
                }
            });
            $(document).one('ajaxloadstart.page', function (e) {
                $('#meter1').entropizer('destroy');
            })
            $("#frmResetPwd").validate({
                rules: {
                    oripassword: {
                        required: true
                    },
                    newpassword: {
                        required: true,
                        minlength: 5
                    },
                    confirmpassword: {
                        required: true,
                        minlength: 5,
                        equalTo: "#newpassword"
                    }

                },
                messages: {
                    oripassword: "请输入您的原始密码",
                    newpassword: {
                        required: "请输入密码",
                        minlength: "密码长度不能小于 5 个字符"
                    },
                    confirmpassword: {
                        required: "请输入确认密码",
                        minlength: "密码长度不能小于 5 个字符",
                        equalTo: "两次密码输入不一致"
                    }
                }
            });
            $("#btnResetPassword").on(ace.click_event, function () {
                var rv = $("#frmResetPwd").valid();
                if (rv) {
                    $.post("@Url.Content("~/Home/ResetPassword")", { op: $("#oripassword").val(), np: $("#newpassword").val(), cp: $("#confirmpassword").val() }, function (rv) {
                        if (rv.success) {
                            $.msg(rv.msg);
                        } else {
                            bootbox.alert(rv.msg);
                        }
                    })
                }
            });


        })
    })
</script>